import { Link } from 'react-router-dom';
import { usePageTitle } from '../hooks/usePageTitle';
import { ImageWithLoader } from '../components/ImageWithLoader';

export function Solutions() {
  usePageTitle('Smart Home Solutions');
  
  const solutions = [{
    id: '1',
    title: 'Smart Kitchen Remodel',
    image: 'https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Kitchen',
    description: 'A complete kitchen transformation with integrated smart appliances that work together seamlessly.',
    products: ['Samsung Bespoke Refrigerator', 'Bosch Series 8 Smart Oven', 'LG QuadWash Dishwasher']
  }, {
    id: '2',
    title: 'Efficient Laundry Setup',
    image: 'https://images.unsplash.com/photo-1582735689369-4fe89db7114c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Laundry',
    description: 'Space-optimized laundry room with high-efficiency machines and smart organization.',
    products: ['Miele TwinDos Washer', 'Samsung Smart Dryer', 'LG Styler']
  }, {
    id: '3',
    title: 'Whole-Home Climate System',
    image: 'https://images.unsplash.com/photo-1558211583-d26f610c1eb1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2076&q=80',
    category: 'Climate',
    description: 'Integrated climate control with zoned heating/cooling and air quality management.',
    products: ['Ecobee Smart Thermostat', 'Dyson Pure Hot+Cool', 'Mitsubishi Split System AC']
  }];
  const testimonials = [{
    quote: 'The integrated kitchen solution recommended by AppliancePicks transformed how we cook and entertain. Everything works together beautifully.',
    author: 'Sarah M., Boston',
    image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80'
  }, {
    quote: 'I was skeptical about investing in premium appliances, but the energy savings and performance have completely justified the cost.',
    author: 'Michael T., Chicago',
    image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80'
  }, {
    quote: "The smart security setup gives us peace of mind whether we're home or traveling. The integration with our other systems is flawless.",
    author: 'Jennifer L., Seattle',
    image: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1961&q=80'
  }];
  return <div className="w-full">
      {/* Hero section */}
      <div className="relative w-full h-96 bg-cover bg-center" style={{
      backgroundImage: 'url("https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80")'
    }}>
        <div className="absolute inset-0 bg-gradient-to-r from-black to-transparent"></div>
        <div className="absolute inset-0 flex items-center">
          <div className="container mx-auto px-4">
            <div className="max-w-xl">
              <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
                Complete Solutions
              </h1>
              <p className="text-xl text-white mb-8">
                Curated appliance ecosystems that work together to create the
                smart home of your dreams.
              </p>
              <button className="bg-[#d4a373] hover:bg-[#c99b6e] text-white px-6 py-3 rounded-md font-medium transition-colors">
                Get a Consultation
              </button>
            </div>
          </div>
        </div>
      </div>
      {/* How it works */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-12 text-center">
            How Our Solutions Work
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center">
              <div className="w-16 h-16 mx-auto bg-[#f8f9fa] rounded-full flex items-center justify-center text-[#d4a373] text-2xl font-bold mb-4">
                1
              </div>
              <h3 className="text-xl font-semibold mb-3">Consultation</h3>
              <p className="text-gray-600">
                We assess your needs, space, and existing systems to understand
                your unique requirements.
              </p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 mx-auto bg-[#f8f9fa] rounded-full flex items-center justify-center text-[#d4a373] text-2xl font-bold mb-4">
                2
              </div>
              <h3 className="text-xl font-semibold mb-3">Curated Selection</h3>
              <p className="text-gray-600">
                Our experts design a complete solution with appliances that work
                together seamlessly.
              </p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 mx-auto bg-[#f8f9fa] rounded-full flex items-center justify-center text-[#d4a373] text-2xl font-bold mb-4">
                3
              </div>
              <h3 className="text-xl font-semibold mb-3">Implementation</h3>
              <p className="text-gray-600">
                We guide you through the purchase and setup process for a
                hassle-free experience.
              </p>
            </div>
          </div>
        </div>
      </section>
      {/* Featured solutions */}
      <section className="py-16 bg-[#f8f9fa]">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-8 text-center">
            Featured Solutions
          </h2>
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {solutions.map(solution => <Link key={solution.id} to={`/solutions/${solution.id}`} className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow group">
                <div className="h-56 overflow-hidden">
                  <ImageWithLoader src={solution.image} alt={solution.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                </div>
                <div className="p-6">
                  <h3 className="font-bold text-xl mb-3 group-hover:text-[#d4a373] transition-colors">
                    {solution.title}
                  </h3>
                  <p className="text-gray-600 mb-4">{solution.description}</p>
                  <h4 className="font-semibold text-sm text-gray-500 mb-2">
                    Featured Products:
                  </h4>
                  <ul className="space-y-1 mb-4">
                    {solution.products.map((product, i) => <li key={i} className="text-sm text-gray-600">
                        • {product}
                      </li>)}
                  </ul>
                  <span className="text-[#d4a373] text-sm font-medium inline-flex items-center">
                    View Case Study
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                    </svg>
                  </span>
                </div>
              </Link>)}
          </div>
        </div>
      </section>
      {/* Testimonials */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-12 text-center">
            What Our Clients Say
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {testimonials.map((testimonial, index) => <div key={index} className="bg-[#f8f9fa] p-6 rounded-lg">
                <div className="flex items-center mb-4">
                  <ImageWithLoader src={testimonial.image} alt={testimonial.author} className="w-12 h-12 rounded-full object-cover mr-4" />
                  <p className="font-medium">{testimonial.author}</p>
                </div>
                <p className="text-gray-600 italic">"{testimonial.quote}"</p>
              </div>)}
          </div>
        </div>
      </section>
    </div>;
}